<template>
	<view>
		<view class="card-form">
			<uni-forms ref="formCard" :rules="rules" :modelValue="cardForm" label-position="top">
				<uni-forms-item label="客户名" name="customer">
					<uni-easyinput v-model="cardForm.customer" placeholder="请输入客户名" />
				</uni-forms-item>
				<uni-forms-item label="手机号" required name="mobile">
					<uni-easyinput v-model="cardForm.mobile" placeholder="请输入手机号或尾号" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit">开卡</button>
		</view>
		<uni-section title="新卡" type="line">
			<xdcard :cardData="cardData"></xdcard>
		</uni-section>
		<uni-popup ref="newCard" type="dialog" :is-mask-click="false">
			<view class="popup-content">
				<view>
					让客户扫码，领取卡片
				</view>
				<view>
					<button type="primary" @click="closeDialog">关闭</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import xdcard from '@/components/card/xdcard.vue'
	export default {
		components: {
			xdcard
		},
		data() {
			return {
				cardForm: {
					customer: '',
					mobile: '',
					cardMold: ''
				},
				cardMoldData: {},
				rules: {
					mobile: {
						rules: [{
							required: true,
							errorMessage: '手机号'
						}, {
							format: 'number',
							errorMessage: '请正确手机号'
						}]
					}
				}
			}
		},
		computed: {
			cardData() {
				return {
					...this.cardMoldData,
					...this.cardForm
				}
			}
		},
		onLoad: function(option) {
			option.id = 123456
			if (option.id == null) {
				uni.showToast({
					title: '开卡，请先制卡！',
					icon: 'none'
				})
				setTimeout(() => {
					uni.reLaunch({
						url: '../../manage/create/create'
					});
				}, 1500)
			}
			this.cardMold = option.id
			// 后台获取
			this.cardMoldData = {
				//卡固定信息
				columnNum: 8,
				// 制卡信息
				id: this.cardMold,
				name: '甜童屋订奶卡',
				count: 30,
				validity: 2,
				tip: '欢迎来店洽谈，电话号：15018118802',
				// 客户信息
				customer: '',
				mobile: '',
				createDate: '2022/04/28',
				validityDate: '2022/05/28',
			}
		},
		methods: {
			// 触发提交表单
			submit() {
				this.$refs['formCard'].validate().then(res => {
					console.log('表单数据信息：', res);
					this.$refs['newCard'].open()
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			closeDialog() {
				this.$refs['newCard'].close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-form {
		padding: 30rpx;
		background-color: #fff;
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 882rpx;
		width: 664rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}
</style>
